<script setup lang="ts">
// 定义挑战卡片数据
const challengeCards = ref([
  {
    id: 1,
    title: '复杂多变',
    description: '工业环境复杂多变，传统解决方案无法适应快速变化的生产需求',
    gradientFrom: 'from-red-400',
    gradientTo: 'to-pink-500',
    hoverColor: 'group-hover:text-red-600',
    iconPath: 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z',
  },
  {
    id: 2,
    title: '人力成本高',
    description: '人力成本持续上升，企业迫切需要寻求自动化解决方案降低成本',
    gradientFrom: 'from-orange-400',
    gradientTo: 'to-yellow-500',
    hoverColor: 'group-hover:text-orange-600',
    iconPath: 'M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z',
  },
  {
    id: 3,
    title: '效率要求高',
    description: '市场竞争激烈，生产效率和产品质量成为企业核心竞争力',
    gradientFrom: 'from-green-400',
    gradientTo: 'to-emerald-500',
    hoverColor: 'group-hover:text-green-600',
    iconPath: 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 1.414L10.586 9.5H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z',
  },
  {
    id: 4,
    title: '技术更新快',
    description: '技术不断革新，企业需要持续更新解决方案以保持竞争优势',
    gradientFrom: 'from-blue-400',
    gradientTo: 'to-indigo-500',
    hoverColor: 'group-hover:text-blue-600',
    iconPath: 'M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z',
  },
])
</script>

<template>
  <!-- 行业现状 -->
  <section
    id="industry"
    class="section relative w-full overflow-hidden from-white via-gray-50 to-blue-50 bg-gradient-to-br py-16"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute right-16 top-16 h-32 w-32 rounded-full bg-gray-200" />
      <div class="absolute bottom-16 left-16 h-24 w-24 rounded-full bg-blue-200" />
      <div class="absolute left-1/3 top-1/2 h-16 w-16 rounded-full bg-red-200" />
      <div class="absolute bottom-1/3 right-1/3 h-12 w-12 rounded-full bg-orange-200" />
    </div>

    <div class="relative mx-auto max-w-[2000px] w-full px-4 lg:px-16 md:px-8">
      <div class="mb-12 text-center">
        <h2 class="mb-4 text-3xl font-bold lg:text-4xl">
          <span
            class="from-red-600 via-pink-600 to-purple-600 bg-gradient-to-r bg-clip-text text-transparent"
          >行业现状</span>
        </h2>
        <p class="text-center text-lg text-gray-600">
          当前工业制造面临的主要挑战和发展趋势
        </p>
      </div>

      <div class="grid grid-cols-1 gap-8 lg:grid-cols-4 sm:grid-cols-2">
        <!-- 循环生成挑战卡片 -->
        <div
          v-for="card in challengeCards"
          :key="card.id"
          class="group flex flex-col transform items-center border border-gray-100 rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div class="relative mb-6">
            <div
              class="absolute inset-0 rounded-full bg-gradient-to-r opacity-30 blur-xl transition-opacity duration-300 group-hover:opacity-50" :class="[
                card.gradientFrom,
                card.gradientTo,
              ]"
            />
            <div
              class="relative h-20 w-20 flex transform items-center justify-center rounded-full bg-gradient-to-r shadow-lg transition-transform duration-300 group-hover:scale-110" :class="[
                card.gradientFrom,
                card.gradientTo,
              ]"
            >
              <svg class="h-10 w-10 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fill-rule="evenodd"
                  :d="card.iconPath"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
          </div>
          <h3 class="mb-3 text-xl text-gray-900 font-bold transition-colors" :class="[card.hoverColor]">
            {{ card.title }}
          </h3>
          <p class="text-gray-600 leading-relaxed">
            {{ card.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
